<template>
  <div>
    <TopTitle title="员工登记" />
    <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="subcribeForm">
      <el-card class="clearfix otherClearfix">
        <div class="otherContent">
          <el-form-item label="真实姓名" prop="realName">
            <el-input v-model="form.realName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="tel">
            <el-input v-model="form.tel" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item class="userLabelSpacing" label="部 门" prop="department">
            <el-select v-model="form.department" placeholder="请选择" style="width: 100%;">
              <el-option
                v-for="item in deptOption"
                :key="item.dictCode"
                :label="item.dictLabel"
                :value="item.dictLabel">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="userLabelSpacing" label="职 务" prop="post">
            <el-select v-model="form.post" placeholder="请选择" style="width: 100%;">
              <el-option
                v-for="item in postOption"
                :key="item.dictCode"
                :label="item.dictLabel"
                :value="item.dictLabel">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="健康证号" prop="healthyNumber" v-if="form.post === '厨房'">
            <el-input v-model="form.healthyNumber" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="有效日期" prop="healthyDate" v-if="form.post === '厨房'">
            <div @click="showPicker = true">
              <el-input readonly v-model="form.healthyDate" placeholder="请选择日期"></el-input>
            </div>
            <van-popup v-model="showPicker" position="bottom">
              <van-datetime-picker
                v-model="changeDate"
                type="date"
                @confirm="onConfirm"
                @cancel="showPicker = false"
                :min-date="minDate"
                title="请选择日期"
              />
            </van-popup>
          </el-form-item>
            <div class="uploadItem" v-if="form.post === '厨房'">
              <p>健康证照（清晰证件照）</p>
              <el-form-item prop="healthyImge" label-width="0">
                <el-upload
                  class="avatar-uploader"
                  action="/common/uploads"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess1">
                  <img v-if="form.healthyImge" :src="form.healthyImge" alt="上传" class="avatar">
                  <img v-else src="../../assets/defultImg.png" alt="上传" class="avatar-uploader-icon"/>
                </el-upload>
              </el-form-item>
            </div>
            <div class="uploadItem" style="margin-top: 16px;">
              <p>人脸照片</p>
              <el-form-item prop="avatar" label-width="0">
                <el-upload
                  class="avatar-uploader"
                  action="/common/uploads"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess2">
                  <img v-if="form.avatar" :src="form.avatar" alt="上传" class="avatar">
                  <img v-else src="../../assets/defultImg.png" alt="上传" class="avatar-uploader-icon"/>
                </el-upload>
              </el-form-item>
            </div>
        </div>
      </el-card>
      <div style="text-align: center;margin: 41px 0;">
        <el-button type="primary" round style="width: 157px;" @click="pushRoute">立即创建</el-button>
      </div>
    </el-form>
</div>
</template>

<script>
  import { Message } from 'element-ui';
  import { fetchGet, fetchPost } from '../../util';
  export default {
    components: {
      TopTitle: () => import("../../components/Title")
    },
    data() {
      return {
        form: {
          realName: '',
          tel: '',
          department: '',
          post: '',
          healthyNumber: undefined,
          healthyDate: undefined,
          healthyImge: undefined,
          avatar: ''
        },
        rules: {
          realName: [{
            required: true,
            message: '请填写真实名称',
            trigger: 'change'
          }],
          tel: [{
            required: true,
            message: '请填写手机号或手机号有误',
            pattern: /^1[3456789]\d{9}$/,
            trigger: 'blur'
          }],
          department: [{
            required: true,
            message: '请选择部门',
            trigger: 'blur'
          }],
          post: [{
            required: true,
            message: '请选择职务',
            trigger: 'blur'
          }],
          healthyNumber: [{
            required: true,
            message: '请填写健康证号',
            trigger: 'change'
          }],
          healthyDate: [{
            required: true,
            message: '请选择有效日期',
            trigger: 'change'
          }],
          healthyImge: [{
            required: true,
            message: '请上传健康证照',
            trigger: 'change'
          }],
          avatar: [{
            required: true,
            message: '请上传人脸照片',
            trigger: 'change'
          }],
        },
        deptOption: [],
        postOption: [],
        showPicker: false,
        minDate: new Date(),
        changeDate: new Date(),
      }
    },
    mounted() {
      this.getOption();
    },
    methods:{
      getOption() {
        Promise.all([
          fetchGet('/api/customerAppointment/selDictData?dictType=sys_customer_dept'),
          fetchGet('/api/customerAppointment/selDictData?dictType=sys_customer_post')
        ]).then(data => {
          if(data[0].code === 0) {
            this.deptOption = data[0]?.data;
          }
          if(data[1].code === 0) {
            this.postOption = data[1]?.data;
          }
        })  
      },
       timeFormat(time) { // 时间格式化 2019-09-08
        const year = time.getFullYear();
        const month = time.getMonth() + 1;
        const day = time.getDate();
        return year + '-' + month + '-' + day;
      },
      onConfirm(time) {
        this.form.healthyDate = this.timeFormat(time);
        this.showPicker = false;
      },
      handleAvatarSuccess1(res) {
        if(res.code === 0) {
          this.form.healthyImge = res.url;
        }
      },
      handleAvatarSuccess2(res) {
        if(res.code === 0) {
          this.form.avatar = res.url;
        }
      },
      pushRoute() {
        this.$refs['form'].validate((valid) => {
					if (valid) {
            fetchPost("/api/login/saveCustomer", {
              ...this.form,
              healthyDate: this.form.healthyDate && `${this.form.healthyDate} 00:00:00`
            }).then(data=>{
              if(data?.code === 0) {
                Message({
                  message: '创建成功',
                  type: 'success'
                });
                sessionStorage.setItem("customer", this.form.post)
                this.$router.replace("/home/staff");
              }
            })
          }
        })
      }
    }
  }
</script>

<style scoped>
  .subcribeForm{
    margin-top: 46px;
  }
  .otherContent {
    padding: 20px;
  }
  .uploadItem p{
    margin-bottom: 16px;
  }
  .avatar {
    width: 101px;
    height: 101px;
    display: block;
  }
</style>
